<template>
    <div class="demo1">
        <charts
                width="600px"
                height="400px"
                :chartExpandAttrs="{
                    dataZoom: [{type: 'inside'}]
                }"
                @on-render="getCharts"
        >
            <charts-x-axis
                    :data="dataAxis"
                    :axisLabel="{inside: true, color: '#fff'}"
                    :axisTick="{show: true}"
                    :axisLine="{show: true}"
                    :z="10"
            />
            <charts-y-axis
                    :axisLabel="{color: '#999'}"
                    :axisTick="{show: false}"
                    :axisLine="{show: true}"
            />
            <charts-series
                    type="bar"
                    :showBackground="true"
                    :itemStyle="{
                  color: {
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [{
                         offset: 0, color: '#83bff6'
                      }, {
                         offset: 1, color: '#188df0'
                      }],
                      global: false
                    }
                }"
                    :data="seriesData"
            />
        </charts>
    </div>
</template>

<script>
  export default {
    name: 'demo1',
    data() {
      return {
        dataAxis: ['点', '击', '柱', '子', '或', '者', '两', '指', '在', '触', '屏', '上', '滑', '动', '能', '够', '自', '动', '缩', '放'],
        seriesData: [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 133, 334, 198, 123, 125, 220],
        yMax: 500,
        dataShadow: []
      }
    },
    mounted() {
      for (let i = 0; i < this.seriesData.length; i++) {
        this.dataShadow.push(this.yMax)
      }
    },
    methods: {
      getCharts(myChart) {
        const zoomSize = 6
        myChart.on('click', (params) => {
          myChart.dispatchAction({
            type: 'dataZoom',
            startValue: this.dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
            endValue: this.dataAxis[
              Math.min(params.dataIndex + zoomSize / 2, this.seriesData.length - 1)
              ]
          })
        })
      }
    }
  }
</script>

